// useTags.ts
import { ref, reactive } from 'vue'

export default function useTags() {
  const tagsDialogVisible = ref(false) // 控制对话框的显示
  const tagsList = reactive<string[]>([]) // 一个响应式数组，存储标签列表

  // 处理标签按钮点击事件的函数
  const handleTagsButtonClick = (event: MouseEvent) => {
    event.stopPropagation() // 阻止事件冒泡
    tagsDialogVisible.value = true // 显示标签对话框
  }

  // 删除标签的函数
  const removeTag = (tag: string) => {
    const index = tagsList.indexOf(tag)
    if (index !== -1) {
      tagsList.splice(index, 1) // 删除这个元素
    }
  }

  // 返回所有的响应式数据和函数，以便在组件中使用
  return {
    tagsDialogVisible,
    tagsList,
    handleTagsButtonClick,
    removeTag
  }
}
